<template>
	<scroll-view scroll-y="true">
		<view class="commoditys-container">
			<!-- 上面审核订单 -->
			<cardShowList title="订单状态">
				<view class="view_white">
					<image src="/static/images/jiesuan.png" style="width: 140rpx; height: 140rpx; margin-top: -40rpx">
					</image>
					<view class="goodsinfo">
						<view style="
                margin-top: 32rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
              ">
							<text style="color: #ff4a00; font-size: 44rpx; font-weight: bold">订单结算中</text>
							<text style="color: #f3a140; font-size: 28rpx; margin: 20rpx">本订单需要您点击页面下方立即支付按钮主动支付</text>
						</view>
					</view>
				</view>
			</cardShowList>

			<cardShowList title="商品列表">
				<view class="commodity">
					<view class="commodity-ls" v-for="(good, index) in expanded
              ? order.goods
              : order.goods.slice(0, 1)" :key="good.id">
						<image :src="good.banner" mode="aspectFit"></image>
						<view class="commodity-rt">
							<view class="commodity-tilte">
								{{ good.goods_name }}
							</view>
							<view class="commodity-bottom">
								<view>
									￥
									<text>{{ good.amount }}</text>
								</view>
								<text class="commodity-bottom-amount">数量:{{ good.count }}</text>
							</view>
						</view>
					</view>
					<!-- 展开提示 -->
					<view v-if="order.goods.length > 1 && !expanded" class="expand-tip" @click.stop="toggleExpand">
						<view class="gradient-overlay">
							<text class="expand-text"> 查看全部商品 </text>
							<uni-icons type="down" size="12" color="#b5b6b7" class="mb2"></uni-icons>
						</view>
					</view>
					<view v-if="order.goods.length > 1 && expanded" class="expand-tip" @click.stop="toggleExpand">
						<view class="gradient-overlay">
							<text class="expand-text">收起 </text>
							<uni-icons type="up" size="12" color="#b5b6b7" class="mb2"></uni-icons>
						</view>
					</view>
					<view class="commodity-settlement">
						共{{ waresTotal }}件商品，合计：
						<text>￥{{ order.amount }}</text>
						<view v-if="order.refund_amount !== 0">
							退款：
							<text>{{ order.refund_amount }}</text>
						</view>
					</view>
				</view>
			</cardShowList>
			<cardShowList title="订单详情">
				<view class="fs30 pl20">
					<view class="orderListLine">
						<text class="mr16">订单编号:</text>
						<text class="sf">{{ order.order_no }}</text>
					</view>
					<view class="orderListLine">
						<text class="mr16">订单时间:</text>
						<text class="sf">{{ order.create_time }}</text>
					</view>
					<view class="orderListLine">
						<text class="mr16">用户姓名:</text>
						<text class="sf">{{ order.user.nickname }}</text>
					</view>
					<view class="orderListLine">
						<text class="mr16">订单状态:</text>
						<text class="sf">已完成</text>
					</view>
					<view class="orderListLine">
						<text class="mr16">设备地址:</text>
						<text class="sf">{{ order.device.location }}</text>
					</view>
				</view>
			</cardShowList>
			<cardShowList title="购物视频" v-if="order.medias.videos.length">
				<view v-for="(item, index) in order.medias.videos" :key="index" style="display: flex; flex-direction: column; align-items: center;">
					<video id="myVideo" :src="item" @error="videoErrorCallback" autoplay muted object-fit="contain"
						class="mb30"></video>
				</view>
			</cardShowList>
			<view class="center mt30"
				v-if="order.pay_status == 0 && (order.pay_type == 99 || order.pay_type == 98||order.pay_type == 97)">
				<view class="blueBg colorWhite br27" style="padding: 15px 55px ;" @click.stop="getDmgpay(order)">
					立即支付
				</view>
			</view>
			<view class="h100"></view>
		</view>

	</scroll-view>
</template>

<script setup>
	import {
		computed,
		onMounted,
		ref,
		defineProps
	} from "vue";
	import cardShowList from "../../../components/cardShowList/cardShowList.vue";
	import { uniFetch } from '../../../api/uni-fetch';
	const props = defineProps({
		orderDetail: {
			type: Object,
			required: true
		}
	});
	const order = ref(props.orderDetail)
	// 展开收起功能
	const expanded = ref(false);

	function toggleExpand() {
		expanded.value = !expanded.value;
	}


	// 立即支付
	function getDmgpay(ev) {
		uniFetch("/order/partner-pay", {
			id: ev.id,
		}).then(
			(res) => {
				// #ifdef MP-WEIXIN
				wx.requestPayment({
					timeStamp: res.data.timestamp + "",
					nonceStr: res.data.nonceStr,
					package: res.data.package,
					signType: res.data.signType,
					paySign: res.data.paySign,
					success: function(res) {
						setTimeout(() => {
							uni.redirectTo({
								url: "/skgPagesA/orderList/orderList",
							});
						}, 1000);
					},
					fail: function(err) {
						console.log(err, "失败返回");
					},
					complete: function(rej) {
						console.log(rej, "失败原因返回");
					},
				});
				// #endif

				// #ifdef MP-ALIPAY
				console.log(res, 'jinlaile!!!@@@');

				my.tradePay({
					// 调用统一收单交易创建接口（alipay.trade.create），获得返回字段支付宝交易号trade_no
					tradeNO: res.data.trade_no,
					success: (res) => {
						console.log(res, '成功了');
						setTimeout(() => {
							uni.redirectTo({
								url: "/skgPagesA/orderList/orderList",
							});
						}, 1000);
					},
					fail: (err) => {
						console.log(err, "失败返回");
					},
				});
				// #endif
			},
			(err) => {
				console.log(err);
			}
		);
	}

	const waresTotal = computed(() => {
		let sum = 0;
		if (!order.value) {
			return sum;
		}
		order.value.goods.forEach((item) => (sum += item.count));
		return sum;
	});
</script>

<style lang="scss" scoped>
	.commoditys-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #f3f3f3;
	}

	.commodity {
		margin-top: 22rpx;

		.commodity-ls {
			height: 150rpx;
			background: #ffffff;
			box-shadow: 0prx 5rpx 5rpx 3rpx #efefef;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			margin: 0 auto;
			margin-bottom: 10rpx;

			image {
				width: 100rpx;
				height: 100rpx;
				margin-left: 40rpx;
			}

			.commodity-rt {
				margin-left: 40rpx;
				margin-right: 40rpx;
				width: 70%;

				.commodity-tilte {
					font-size: 30rpx;
					color: #333333;
					font-weight: 550;
				}

				.specification {
					font-size: 26rpx;
					color: #333333;
					margin-top: 16rpx;
					font-weight: 550;
				}

				.commodity-bottom {
					margin-top: 30rpx;
					display: flex;
					justify-content: space-between;

					view {
						font-size: 18rpx;
						color: #fc415e;

						text {
							font-size: 28rpx;
							color: #fc415e;
						}
					}

					.commodity-bottom-amount {
						font-size: 28rpx;
						color: #c1c1c1;

					}
				}
			}
		}

		.commodity-settlement {
			height: 60rpx;
			background: #fff;
			margin: 0 auto;
			box-shadow: 0prx 5rpx 5rpx 3rpx #efefef;
			border-radius: 10rpx;
			font-size: 28rpx;
			color: #5a5a5a;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			text {
				font-size: 24rpx;
				color: #fa425e;
				margin-right: 40rpx;
			}
		}
	}

	.expand-tip {
		margin-top: -40rpx;

		.gradient-overlay {
			height: 100rpx;
			background: linear-gradient(180deg,
					rgba(255, 255, 255, 0) 0%,
					rgba(255, 255, 255, 1) 100%);
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.expand-text {
			color: #b5b6b7;
			font-size: 24rpx;
			margin-right: 6rpx;
		}
	}

	.orderListLine {
		margin-bottom: 16rpx;
	}

	.view_white {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 60rpx;
		background-color: #fff;
		border-radius: 10rpx;
	}
</style>